import React from 'react';
import { View, StyleSheet } from 'react-native';
import { Layout, UI, useThemeColors } from '@gaozh1024/rn-toolkit';

const DividerTestScreen: React.FC = () => {
  const colors = useThemeColors();

  const styles = StyleSheet.create({
    section: { marginBottom: 16 },
    card: { borderRadius: 12, borderWidth: 1, borderColor: colors.border },
    row: { flexDirection: 'row', alignItems: 'center', gap: 12, flexWrap: 'wrap' },
    verticalRow: { flexDirection: 'row', alignItems: 'stretch', gap: 12, height: 48 },
    box: { width: 64, height: 32, borderRadius: 8, backgroundColor: colors.surface, alignItems: 'center', justifyContent: 'center' },
  });

  return (
    <Layout.Page
      headerShown
      headerProps={{ title: 'Divider 测试', backVisible: true }}
      padding={16}
      scrollable
      testID="DividerTestScreen"
    >
      {/* 基础用法：横向分割线（默认） */}
      <View style={styles.section}>
        <Layout.Card style={styles.card} p={16} backgroundColor={colors.surface}>
          <UI.Text variant="h3" color="text" style={{ marginBottom: 12 }}>基础用法</UI.Text>
          <UI.Text variant="caption" color="subtext" mb={8}>
            默认横向、颜色为主题 divider、粗细为 1
          </UI.Text>
          <View style={{ gap: 8 }}>
            <UI.Text variant="body2" color="text">上方内容</UI.Text>
            <UI.Divider testID="divider-basic-horizontal" />
            <UI.Text variant="body2" color="text">下方内容</UI.Text>
          </View>
        </Layout.Card>
      </View>

      {/* 方向：horizontal / vertical */}
      <View style={styles.section}>
        <Layout.Card style={styles.card} p={16} backgroundColor={colors.surface}>
          <UI.Text variant="h3" color="text" style={{ marginBottom: 12 }}>方向</UI.Text>
          <UI.Text variant="caption" color="subtext" mb={8}>
            orientation: horizontal / vertical（vertical 需有可伸展的父容器高度）
          </UI.Text>
          <View style={{ gap: 8 }}>
            <UI.Text variant="body2" color="text">horizontal</UI.Text>
            <UI.Divider orientation="horizontal" testID="divider-orientation-horizontal" />
            <UI.Text variant="body2" color="text">vertical（中间竖线）</UI.Text>
            <View style={styles.verticalRow}>
              <View style={styles.box}><UI.Text variant="caption" color="onSurface">A</UI.Text></View>
              <UI.Divider orientation="vertical" testID="divider-orientation-vertical" />
              <View style={styles.box}><UI.Text variant="caption" color="onSurface">B</UI.Text></View>
            </View>
          </View>
        </Layout.Card>
      </View>

      {/* 颜色：主题预设 + 自定义 */}
      <View style={styles.section}>
        <Layout.Card style={styles.card} p={16} backgroundColor={colors.surface}>
          <UI.Text variant="h3" color="text" style={{ marginBottom: 12 }}>颜色</UI.Text>
          <UI.Text variant="caption" color="subtext" mb={8}>
            color: primary / secondary / success / warning / error / info / text / subtext / border / divider / '#RRGGBB'
          </UI.Text>
          <View style={{ gap: 8 }}>
            <UI.Divider color="primary" testID="divider-color-primary" />
            <UI.Divider color="success" testID="divider-color-success" />
            <UI.Divider color="warning" testID="divider-color-warning" />
            <UI.Divider color="error" testID="divider-color-error" />
            <UI.Divider color="info" testID="divider-color-info" />
            <UI.Divider color="text" testID="divider-color-text" />
            <UI.Divider color="border" testID="divider-color-border" />
            <UI.Divider color="#8A2BE2" testID="divider-color-custom" />
          </View>
        </Layout.Card>
      </View>

      {/* 粗细：thickness */}
      <View style={styles.section}>
        <Layout.Card style={styles.card} p={16} backgroundColor={colors.surface}>
          <UI.Text variant="h3" color="text" style={{ marginBottom: 12 }}>粗细</UI.Text>
          <UI.Text variant="caption" color="subtext" mb={8}>
            thickness 控制线条厚度（横向为高度、纵向为宽度）
          </UI.Text>
          <View style={{ gap: 10 }}>
            <UI.Divider thickness={1} testID="divider-thickness-1" />
            <UI.Divider thickness={2} testID="divider-thickness-2" />
            <UI.Divider thickness={4} testID="divider-thickness-4" />
            <UI.Divider thickness={8} testID="divider-thickness-8" />
          </View>
          <View style={[styles.verticalRow, { marginTop: 10 }]}>
            <View style={styles.box} />
            <UI.Divider orientation="vertical" thickness={2} testID="divider-vertical-thickness-2" />
            <View style={styles.box} />
            <UI.Divider orientation="vertical" thickness={6} testID="divider-vertical-thickness-6" />
            <View style={styles.box} />
          </View>
        </Layout.Card>
      </View>

      {/* 缩进：inset（number / {start, end}） */}
      <View style={styles.section}>
        <Layout.Card style={styles.card} p={16} backgroundColor={colors.surface}>
          <UI.Text variant="h3" color="text" style={{ marginBottom: 12 }}>缩进</UI.Text>
          <UI.Text variant="caption" color="subtext" mb={8}>
            inset: number（仅 start）或对象 {`{ start, end }`}；对 horizontal 是左右缩进，对 vertical 是上下缩进
          </UI.Text>
          <View style={{ gap: 8 }}>
            <UI.Divider inset={16} testID="divider-inset-number-16" />
            <UI.Divider inset={{ start: 12, end: 6 }} testID="divider-inset-object-12-6" />
          </View>
          <View style={[styles.verticalRow, { marginTop: 10 }]}>
            <View style={styles.box} />
            <UI.Divider orientation="vertical" inset={10} testID="divider-vertical-inset-number-10" />
            <View style={styles.box} />
            <UI.Divider orientation="vertical" inset={{ start: 4, end: 12 }} testID="divider-vertical-inset-object-4-12" />
            <View style={styles.box} />
          </View>
        </Layout.Card>
      </View>

      {/* 间距：p/m/mh/mv/ph/pv（应用在 Divider 容器上） */}
      <View style={styles.section}>
        <Layout.Card style={styles.card} p={16} backgroundColor={colors.surface}>
          <UI.Text variant="h3" color="text" style={{ marginBottom: 12 }}>间距</UI.Text>
          <UI.Text variant="caption" color="subtext" mb={8}>
            Divider 继承通用 SpacingProps：p/m/mh/mv/ph/pv
          </UI.Text>
          <View style={{ gap: 8, borderWidth: 1, borderColor: colors.border, padding: 8 }}>
            <UI.Divider m={12} testID="divider-spacing-m" />
            <UI.Divider mh={12} testID="divider-spacing-mh" />
            <UI.Divider mv={8} testID="divider-spacing-mv" />
            <UI.Divider p={4} testID="divider-spacing-p" />
            <UI.Divider ph={8} testID="divider-spacing-ph" />
            <UI.Divider pv={4} testID="divider-spacing-pv" />
          </View>
        </Layout.Card>
      </View>

      {/* 自定义样式：style */}
      <View style={styles.section}>
        <Layout.Card style={styles.card} p={16} backgroundColor={colors.surface}>
          <UI.Text variant="h3" color="text" style={{ marginBottom: 12 }}>style 自定义</UI.Text>
          <UI.Text variant="caption" color="subtext" mb={8}>
            可通过 style 调整不透明度、圆角等（注意颜色受 color 控制）
          </UI.Text>
          <View style={{ gap: 8 }}>
            <UI.Divider color="primary" thickness={6} style={{ opacity: 0.6, borderRadius: 3 }} testID="divider-style-opacity-radius" />
            <View style={styles.verticalRow}>
              <UI.Divider orientation="vertical" color="success" thickness={6} style={{ borderRadius: 3 }} testID="divider-style-vertical-radius" />
            </View>
          </View>
        </Layout.Card>
      </View>
    </Layout.Page>
  );
};

export default DividerTestScreen;